<!DOCTYPE HTML>
<html>
<head>
    {include file="common:meta"}
    <style>
        .query-content div{
            float: left;
            margin-right: 20px;
        }
        .btn-margin{
            margin-right: 10px;
        }
        .consume{
            text-align: center;
            margin: 1%;
        }
    </style>
</head>
<body>
<div class="page-container">
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="query-content clearfloat">
                <div class="form-group">
                    <label class="control-label">
                        <select class="form-control" name="mode_type">
                            {volist name='mode_type' id='vo' }
                            <option value="{$vo}">模式{$vo}</option>
                            {/volist}
                        </select>
                    </label>
                </div>
                <div class="form-group">
                    <label class="control-label">
                        <select class="form-control" name="gold_id">
                            <option value="18">金宝箱</option>
                            <option value="19">至尊宝箱</option>
                        </select>
                    </label>
                </div>

                <div class="form-group">
                    <label class="control-label">
                        <input type="text" class="form-control date-search" id="start_time" placeholder="日期">
                    </label>
                </div>

                <!--<div class="form-group">-->
                    <!--<label class="control-label">-->
                        <!--<input type="text" class="form-control date-search" id="end_time" placeholder="结束时间">-->
                    <!--</label>-->
                <!--</div>-->
            </div>
            <div class="consume">
                <span>钻石消耗：</span><span>0000</span>
            </div>
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>日期</th>
                    <th></th>
                    <th>明细</th>
                </tr>
                </thead>
                <tbody id="info">

                </tbody>
            </table>
        </div>
    </div>
</div>
{include file="common:footer"}
<script>
//    getData();
    //时间搜索插件
var currentTime = new Date(new Date().getTime());


var timeFlag = {
    'Y': currentTime.getFullYear(),
    'M': currentTime.getMonth() + 1, // 月份
    'd': currentTime.getDate(), // 日
    'h': currentTime.getHours(), // 小时
    'm': currentTime.getMinutes(), // 分
    's': currentTime.getSeconds(), // 秒
    'q': Math.floor((currentTime.getMonth() + 3) / 3), // 季度
    'S': currentTime.getMilliseconds() // 毫秒
};

//时间搜索插件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        lay('#start_time').each(function () {
            laydate.render({
                elem: this,
                type: 'date',
                value:currentTime,
                trigger: 'click'
            });
        });
    });


    //获取收入数据
    function getData(){
        var queryTime = $('#time').val(),roomId = $('#roomId').val();
        var datas = {
            roomId:roomId
        };
        if(queryTime.length)
            datas.queryTime = queryTime;
        $.ajax({
            type:'get',
            url:'/RoomFlowingInfoData',
            data:datas,
            dataType:'json',
            success:function(result){
                // console.log(result);
                if(result.resultCode == 100){
                    var htmlElement = '',data = result.resultData;
                    for(var i in data){
                        if(data[i].diamonds > 0)
                            htmlElement += "<tr><td>"+ data[i].date + "</td><td>"+ data[i].diamonds +"</td><td class='btn-margin'>"
                                + "<button class='gift-info btn btn-warning btn-sm btn-margin'>查看礼物详情</button><button class='hour-flowing btn btn-danger btn-sm btn-margin'>查看房间小时流水</button></td></tr>";
                        else
                            htmlElement += "<tr><td>"+ data[i].date + "</td><td>"+ data[i].diamonds +"</td><td></td></tr>";
                    }
                    $('#info').html(htmlElement);
                    var giftInfoObj = $('.gift-info'),hourFlowingObj = $('.hour-flowing');
                    if(giftInfoObj.length){
                        //查看礼物详情
                        giftInfoObj.on('click',function(){
                            var dates = $(this).parent().siblings('td').eq(0).text();
                            layer.open({
                                type: 2,
                                title: ['赠送礼物详情（' + dates + '）','font-size:18px;font-family:楷体;font-weight:700;'],
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['800px', '500px'],
                                content:"/RoomGiftInfo?roomId=" + $('#roomId').val() + '&dates=' + dates,
                                offset:'auto',
                                scrollbar:false
                            });
                        });
                        //查看房间小时流水
                        hourFlowingObj.on('click',function(){
                            var dates = $(this).parent().siblings('td').eq(0).text();
                            layer.open({
                                type: 2,
                                title: ['房间小时流水（' + dates + '）','font-size:18px;font-family:楷体;font-weight:700;'],
                                shadeClose: true,
                                shade: false,
                                maxmin: true, //开启最大化最小化按钮
                                area: ['800px', '500px'],
                                content:"/RoomFlowingHour?roomId=" + $('#roomId').val() + '&dates=' + dates,
                                offset:'auto',
                                scrollbar:false
                            });
                        });
                    }
                }
                else{
                    $('#info').empty();
                }
            },
            error:function(err){
                layer.msg('服务器开小差了！',{
                    time:2000
                });
            }
        });
    }
    //查询某一月的房间流水
    $('#query').click(function(){
        getData();
    });

    //计算房间流水
    $('#sum').click(function(){
        var start_time = $('#start_time').val();
        var end_time = $('#end_time').val();

        //将开始时间转为时间戳
        var date = new Date(start_time);
        var time1 = date.getTime();
        //获取当前时间戳
        var timestamp=new Date().getTime();

        if(time1 > timestamp ){
            layer.msg('时间超前啦',{
                icon:2,
                time:1000
            });
            $('#start_time').val(''); //清空
            return false;
        }

        if( start_time ==='' ||  end_time ===''){
            layer.msg('请选择完整的时间',{
                icon:2,
                time:1000
            });
            return false;
        }
        $.ajax({
            type: "get",
            url: "/RoomFlowingCount",
            data:{
                'start_time':start_time,
                'end_time':end_time,
                'roomId':$('#roomId').val()
            } ,
            dataType: 'JSON',
            success: function (re) {
                if (re.code === 100) {
                    console.log(re);
                    $("#flowing").attr("value",re.data);
                } else {
                    layer.msg(re.msg,{
                        icon:2,
                        time:1000
                    });
                }
            },
            error: function () {
                alert('服务器出小差了');
            }
        });
    });

    //计算房间总流水
    $('#count').click(function(){
        $.ajax({
            type: "get",
            url: "/RoomFlowingCount",
            data:{
                'roomId':$('#roomId').val()
            } ,
            dataType: 'JSON',
            success: function (re) {
                if (re.code === 100) {
                    console.log(re);
                    $("#count-flowing").attr("value",re.data);
                } else {
                    layer.msg(re.msg,{
                        icon:2,
                        time:1000
                    });
                }
            },
            error: function () {
                alert('服务器出小差了');
            }
        });
    });
</script>
</body>
</html>